$max-width-1: 480px;
$max-width-2: 880px;

#info {
	display: none;

	border-style: none none none solid;
	border-width: 2px;

	position: fixed;
	right: 0;

	background-color: #fff;
	border-color: #eee;

	width: 25rem;
	height: 0;

	margin: 1rem 0 0 0;
	padding: 6rem 0 0 0;

	flex-direction: column;
	align-items: center;

	@media (max-width: $max-width-1) {
		width: 100%;

		padding: 5rem 0 0 0;
	}

	button {
		border-style: none;
		background-color: white;

		img {
			width: 1rem;
		}
	}

	#schoolPart {
		width: 80%;
		min-height: 4rem;

		padding: 0 0 0.8rem 0;

		border-style: none none solid none;
		border-width: 1px;
		border-color: #ccc;

		display: flex;
		align-items: center;

		img {
			width: 4rem;
			height: 4rem;

			margin: 0 0.5rem;
		}

		#right {
			display: flex;
			flex-direction: column;
		}
	}

	#peoplePart {
		width: 80%;

		padding: 0.5rem 0 2rem 0;

		display: flex;
		flex-direction: column;

		overflow: scroll;

		.individual {
			min-height: 3.5rem;

			margin: 0.2rem;
		}
	}

	#hideInfo {
		position: absolute;
		right: 1rem;
		top: 4rem;

		img {
			@media (max-width: $max-width-1) {
				width: 0.8rem;
			}
		}
	}
}
